import React from 'react';

export default class extends React.Component{
  constructor(props){
    super();
    this.state={
      active:props.active,
      Change:props.Change
    }
  }
  Triggle(){
    let active=this.state.active;
    if(active===undefined){
      active=false;
    }
    this.setState({
      active:!active
    },()=>{
      if(this.props.Change!==undefined ){
          this.props.Change();
      }
  });
  }
  UNSAFE_componentWillReceiveProps(props){
    this.setState({
      active:props.active,
    })
  }

  render(){
    return(
      <svg xmlns="http://www.w3.org/2000/svg" onClick={e=>this.Triggle(e)} width="50.209" height="46.623" viewBox="0 0 50.209 46.623">
      <path id="全部" fill={this.state.active?"#5393eb":"#999"} class="cls-1" d="M112.137,142.289H84.067a2.1,2.1,0,1,1,0-4.2h26v-9.738h-26a2.062,2.062,0,0,1-2.07-2.1v-13.9a2.062,2.062,0,0,1,2.07-2.1h26v-9.733h-26a2.1,2.1,0,1,1,0-4.2h28.07a2.062,2.062,0,0,1,2.07,2.1v13.935a2.062,2.062,0,0,1-2.07,2.1h-26V124.2h26a2.062,2.062,0,0,1,2.07,2.1v13.9a2.062,2.062,0,0,1-2.07,2.094ZM76.75,109.537H66.068a2.05,2.05,0,0,1-2.07-2.07v-9.4A2.05,2.05,0,0,1,66.068,96H76.792a2.05,2.05,0,0,1,2.07,2.07v9.4A2.111,2.111,0,0,1,76.75,109.537Zm-8.607-4.14h6.583v-5.258H68.142Zm8.607,20.683H66.068a2.05,2.05,0,0,1-2.07-2.07v-9.4a2.05,2.05,0,0,1,2.07-2.07H76.792a2.05,2.05,0,0,1,2.07,2.07v9.4A2.111,2.111,0,0,1,76.75,126.079Zm-8.607-4.14h6.583v-5.258H68.142Zm8.607,20.683H66.068a2.05,2.05,0,0,1-2.07-2.07v-9.4a2.05,2.05,0,0,1,2.07-2.07H76.792a2.05,2.05,0,0,1,2.07,2.07v9.4A2.111,2.111,0,0,1,76.75,142.621Zm-8.607-4.14h6.583v-5.258H68.142Z" transform="translate(-63.998 -95.998)"/>
    </svg>
    
    );
  }
}